<template>
    <view class="bg-white rounded-lg m-4 p-4 shadow-lg">
      <!-- 标题栏 -->
      <view class="flex justify-between items-center mb-4">
        <text class="text-lg font-bold text-gray-800">常规项目</text>
        <view class="flex items-center py-1 px-2 cursor-pointer" @tap="toggleExpanded">
          <text class="text-sm text-gray-400 mr-1">{{ isExpanded ? '收起' : '展开' }}</text>
          <text class="text-xs text-gray-400">{{ isExpanded ? '∧' : '∨' }}</text>
        </view>
      </view>
  
      <!-- 健康数据列表 -->
      <view class="flex flex-col gap-4" v-if="isExpanded">
        <view 
          class="flex items-center py-3 border-b border-gray-100 last:border-b-0" 
          v-for="(item, index) in healthData" 
          :key="index"
        >
          <!-- 左侧图标 -->
          <view class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :style="{ backgroundColor: item.iconColor }">
            <text class="text-xl">{{ item.icon }}</text>
          </view>
  
          <!-- 中间内容 -->
          <view class="flex-1 flex flex-col gap-1">
            <text class="text-base font-medium text-gray-800">{{ item.title }}</text>
            <text class="text-sm text-gray-600">{{ item.value }}</text>
          </view>
  
          <!-- 右侧状态标签 -->
          <view 
            class="py-1 px-3 rounded-xl text-xs font-medium min-w-10 text-center" 
            :style="{ 
              backgroundColor: item.status.bgColor,
              color: item.status.textColor 
            }"
          >
            <text>{{ item.status.text }}</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  // 展开/收起状态
  const isExpanded = ref(true);
  
  // 健康数据
  const healthData = ref([
    {
      icon: '🩸',
      iconColor: '#4CAF50',
      title: '血糖',
      value: '血糖数值：9.4(空腹)',
      status: {
        text: '轻度',
        bgColor: '#FFB74D',
        textColor: '#FFFFFF'
      }
    },
    {
      icon: '🫁',
      iconColor: '#4CAF50',
      title: '血氧',
      value: '血氧饱和度：99%',
      status: {
        text: '正常',
        bgColor: '#66BB6A',
        textColor: '#FFFFFF'
      }
    },
    {
      icon: '💓',
      iconColor: '#4CAF50',
      title: '血压·心率',
      value: '血压：120/81    心率：99',
      status: {
        text: '轻度',
        bgColor: '#FFB74D',
        textColor: '#FFFFFF'
      }
    },
    {
      icon: '🌡️',
      iconColor: '#4CAF50',
      title: '体温',
      value: '体温度数：36.0°C',
      status: {
        text: '正常',
        bgColor: '#66BB6A',
        textColor: '#FFFFFF'
      }
    },
    {
      icon: '📊',
      iconColor: '#4CAF50',
      title: '心电图',
      value: '心电数值：',
      status: {
        text: '正常',
        bgColor: '#66BB6A',
        textColor: '#FFFFFF'
      }
    },
    {
      icon: '🏃',
      iconColor: '#4CAF50',
      title: '运动',
      value: '运动分数：20',
      status: {
        text: '正常',
        bgColor: '#66BB6A',
        textColor: '#FFFFFF'
      }
    }
  ]);
  
  // 切换展开/收起状态
  const toggleExpanded = () => {
    isExpanded.value = !isExpanded.value;
  };
  </script> 